<template>
  <div class="container">
    <el-card class="box-card">
      <div class="header">
        <span style="color: #ffc5ce">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          size="mini"
          @click="$router.push({ name: 'questions-new' })"
          ><i class="el-icon-edit"></i>新增试题</el-button
        >
      </div>
      <div class="body">
        <el-form
          ref="form"
          size="small"
          :model="form"
          label-width="80px"
          inline
        >
          <el-form-item label="学科">
            <el-select v-model="form.subjectID" placeholder="请选择">
              <el-option
                v-for="item in subjects"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select v-model="form.catalogID" placeholder="请选择">
              <el-option
                v-for="item in dirList"
                :key="item.id"
                :label="item.directoryName ? item.directoryName : '无数据'"
                :value="item.id"
              ></el-option>
              <el-option
                v-if="!form.subjectID"
                label="无数据"
                value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="form.tags" placeholder="请选择">
              <el-option
                v-for="item in tagsList"
                :key="item.id"
                :label="item.tagName ? item.tagName : '无数据'"
                :value="item.id"
              ></el-option>
              <el-option
                v-if="!form.subjectID"
                label="无数据"
                value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              v-model="form.keyword"
              placeholder="请选择题干搜索"
              class="input"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题类型">
            <el-select v-model="form.questionType" placeholder="请选择">
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简答" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="form.difficulty" placeholder="请选择">
              <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务"></el-option>
              <el-option label="企业服务" value="企业服务"></el-option>
              <el-option label="互联网金融" value="互联网金融"></el-option>
              <el-option label="企业咨询" value="企业咨询"></el-option>
              <el-option label="互联网" value="互联网"></el-option>
              <el-option label="电子商务" value="电子商务"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入">
            <el-select v-model="form.creatorID" placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks" class="input"></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName" class="input"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select
              v-model="form.province"
              placeholder="请选择"
              class="Select"
            >
              <el-option
                v-for="(item, index) in pros"
                :key="index"
                :label="item.city"
                :value="item.city"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.city" placeholder="请选择" class="Select">
              <el-option
                v-for="(item, index) in citys"
                :key="index"
                :label="item"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="float: right">
            <el-button @click="clearAll">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <slot name="table"></slot>
      <slot name="page"></slot>
    </el-card>
  </div>
</template>

<script>
import { simple as list } from '@/api/hmmm/subjects'
// import { list as dirList } from '@/api/hmmm/directorys'
import { list as dirSimpleList } from '@/api/hmmm/directorys'
import { list as tagsList } from '@/api/hmmm/tags'
import { simple as userList } from '@/api/base/users'
import { provinces } from '@/api/hmmm/citys.js'
import { list as questionsList, choice } from '@/api/hmmm/questions'
export default {
  name: 'Pagetools',
  data () {
    return {
      form: {
        page: 1,
        pagesize: 5,
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      },
      subjects: [],
      dirList: [],
      tagsList: [],
      userList: [],
      datas: [],
      citys: [],
      pros: []
    }
  },
  created () {
    this.loadSubjects()
    this.loadUserList()
    // provinces(datas)
    // console.log(provinces)
    this.transCitys(provinces)
  },
  watch: {
    'form.subjectID': {
      handler (newVal) {
        // console.log(newVal)
        this.loadDirList(newVal)
        this.loadTagsList(newVal)
      },
      deep: true
    },
    'form.province': {
      handler (newVal) {
        // console.log(newVal)
        this.chooseCity(newVal)
      },
      deep: true
    }
  },
  methods: {
    // 获取学科列表
    async loadSubjects () {
      const res = await list()
      // console.log(res, 111)
      if (res.status !== 200) return
      this.subjects = res.data
    },
    // 获取二级目录
    async loadDirList (newVal) {
      const res = await dirSimpleList({ subjectID: newVal })
      // console.log(res, 222)
      if (res.status !== 200) return
      this.dirList = res.data.items
    },
    // 获取标签列表
    async loadTagsList () {
      const res = await tagsList({ subjectID: this.form.subjectID })
      // console.log(res, 333)
      if (res.status !== 200) return
      this.tagsList = res.data.items
    },
    // 获取用户列表
    async loadUserList () {
      const res = await userList()
      // console.log(res)
      if (res.status !== 200) return
      this.userList = res.data
    },
    // 处理城市数据
    transCitys (data) {
      // console.log(data)
      data.forEach((item) => {
        // console.log(item)
        // if(item.area) {
        //   console.log(item);
        // }
        this.pros.push(item)
      })
    },
    chooseCity (pro) {
      this.pros.filter((item) => {
        if (item.city === pro) {
          // console.log(item)
          this.citys = item.area
        }
      })
    },
    // 筛选
    async onSubmit () {
      const obj = {}
      for (const key in this.form) {
        if (this.form[key] !== '') {
          obj[key] = this.form[key]
        }
      }
      if (this.$parent.$options.name === 'questions') {
        const res = await questionsList(obj)
        this.$parent.tableData = res.data.items
      } else if (this.$parent.$options.name === 'questions-choice') {
        const res = await choice(obj)
        this.$parent.tableData = res.data.items
      }
    },
    // 清除
    clearAll () {
      this.$refs.form.resetFields()
      this.form = {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: '',
        questionType: null,
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: null,
        catalogID: null
      }
      // this.$parent.loadquesList()
      console.log(this.$parent.$options.name)
      if (this.$parent.$options.name === 'questions') {
        this.$parent.loadquesList()
      } else if (this.$parent.$options.name === 'questions-choice') {
        this.$parent.loadChoiceList()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 10px 8px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;

    .el-icon-edit {
      display: inline-block;
      margin-right: 5px;
    }
  }

  //   .body {
  //     margin: 20px;
  //     //   ::v-deep .el-input--medium .el-input__inner {
  //     //     width: 300px;
  //     //   }
  //     ::v-deep .el-input__inner {
  //       width: 300px;
  //     }
  //     ::v-deep .Select > .el-input {
  //       width: 113px !important;
  //     }
  //   }
  .body {
    margin-top: 15px;
    ::v-deep .el-select > .el-input {
      width: 316px;
    }
    ::v-deep .Select > .el-input {
      width: 158px;
    }
    .input {
      width: 325px;
    }
  }
}
</style>
